<template>
	<view class="page">
		<cu-custom  bgColor="bg-orange-form" :isBack="true">
		    <block slot="content">组局信息发布</block>
		</cu-custom>
		<view class="join_form">
			<view style="border-radius: 20rpx;background: #fff;">
				<form>
				    <view class="cu-form-group margin-top" style="border-radius: 20rpx;">
						<view class="title">商家名称</view>
						<input placeholder="商家名称" name="input" v-model="merchant_detail.name" disabled></input>
					</view>
					<view class="cu-form-group">
						<view class="title">预定卡座</view>
						 <picker
						      mode="selector"
						      :range="booth_list"
						      range-key="name"
						      @change="select_booth"
						    >
						      <view class="picker">
						        {{ selectedBooth.name ? selectedBooth.name : '请点击选择卡座' }}
						      </view>
						    </picker>
					</view>
					<view class="cu-form-group justify-around">
						<view class="title">玩法</view>
						<input  name="input" placeholder="玩法说明" v-model="form.play_mode"></input>
					</view>
					<view class="cu-form-group">
						<view class="title" >要求</view>
						<input name="input"  placeholder="组局要求"  v-model="form.requirements"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">联系人</view>
						<input name="input"  placeholder="组局联系人"  v-model="form.contact_name"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">联系方式</view>
						<input  type="number" placeholder="组局联系方式"  v-model="form.contact_mobile" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">限制人数</view>
						<input  type="number"   placeholder="组局人数限制" v-model="form.max_people" name="input"></input>
					</view>
					<view class="cu-form-group">
							<view class="title">日期</view>
							<picker mode="date" :value="form.start_date" :start="form.start_date"  @change="DateChange">
								<view class="picker">
									{{form.start_date}}
								</view>
							</picker>
					</view>
					<view class="cu-form-group">
							<view class="title">时间</view>
							<picker mode="time" :value="form.start_time"  @change="TimeChange">
								<view class="picker">
									{{form.start_time}}
								</view>
							</picker>
						</view>
					<view class="cu-form-group" style="border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;">
						<view class="title">备注</view>
						<textarea placeholder="组局备注信息"   name="input"></textarea>
					</view>
					
				</form>
				<view class="text-center padding-lr-sm">
					<view class="flex align-center">
						<checkbox-group class="block" @change="select_aggree">
							<checkbox style="transform:scale(0.7)" :class="form.agree ? 'checked' : ''"  value="1"  class="round orange"  ></checkbox>
						</checkbox-group>
						<view class=" text-gray">我已阅读并同意 <span class="text-orange-light">《用户组局规则协议》</span></view>
					</view>
					<button class="cu-btn bg-orange-dark round   lg margin-tb-lg" @click="group_detail" style="width: 90%;text-align: center;">免费组局</button>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import { getMechantDetail,startGroup } from '@/api/merchant.js';
	import tools from '../../utils/tools.js'
	import validate from '../../utils/validate';
	export default {
		data() {
			return {
				merchant_detail : {
					
				},
				form : {
					agree : true,
					play_mode : '',
					requirements:'',
					contact_name : '',
					contact_mobile :'',
					max_people　:　1,
					start_time : '00:00',
					remark : '',
					start_date : tools.getFormattedDate()
				},
				// 包厢列表
			  booth_list: [
				{ id: 1, title: '转转麻将豪华包间1' },
				{ id: 2, title: '转转麻将豪华包间2' },
				{ id: 3, title: '转转麻将豪华包间3' },
			  ],
			  // 当前选中的包厢
			  selectedBooth: {}, // 默认选中第一个
				
			}
		},
		onLoad(option) {
			let id = option.mid
			if(!id){
				// uni.navigateBack();
			}
			this.fetch_merchat_detail(id);
		},
		methods: {
			TimeChange(e) {
			    this.form.start_time = e.detail.value
			},
			DateChange(e) {
			    this.form.start_date = e.detail.value
			},
			select_booth(event) {
			      const index = event.detail.value; // 获取选中的索引
			      this.selectedBooth = this.booth_list[index]; // 更新选中的包厢
				  this.form.cid = this.selectedBooth.id
			},
			select_aggree(e){
				
				var  values = e.detail.value[0];
				if(values){
					this.form.agree = true
				}else{
					this.form.agree = false
				}
			},
			fetch_merchat_detail(id){
				//商家详情
				getMechantDetail(id).then(res=>{
					this.merchant_detail = res.data
					this.booth_list      = res.data.cassette
					this.form.mid = res.data.id
				})
			},
			group_detail(){
				if(validate.isEmpty(this.form.mid)){
					return tools.Tips('商家信息不得为空')
				}
				if(validate.isEmpty(this.form.cid)){
					return tools.Tips('卡座信息不得为空')
				}
				if(validate.isEmpty(this.form.contact_name)){
					return tools.Tips('联系人信息不得为空')
				}
				if(!validate.checkMobile(this.form.contact_mobile)){
					return tools.Tips('联系人手机号不得为空')
				}
				if(validate.isEmpty(this.form.start_date)){
					return tools.Tips('开始日期不得为空')
				}
				if(validate.isEmpty(this.form.start_date)){
					return tools.Tips('开始时间不得为空')
				}
				if(!this.form.agree){
					return tools.Tips('请先同意规则协议')
				}
				uni.showLoading({
					title:'组局中...'
				})
				startGroup(this.form).then(res=>{
					uni.hideLoading();
					tools.Tips('组局成功...');
					setTimeout(uni.navigateTo({
						url:'/pages/shop/group_detail?order_id='+res.data
					 }),500)
				})
			
			}
		}
	}
</script>

<style scoped>
	.page{
		background: linear-gradient(180deg, rgba(254, 163, 102, 1) 0%, rgba(255, 87, 51, 1) 100%);height: 100vh
	}
	.join_form{
		padding-top: 0;
		padding: 24rpx;
		border-radius: 10rpx;
	}
	.join_form .title{
		width: 250rpx;
	}
</style>
